<template>
  <div class="app-container calendar-list-container">
    <!-- filter 条件查询 -->
    <div class="filter-container" style="overflow:hidden">
      {{$t('recommend.Sharing_user_phone_number')}} 
      <el-input clearable  v-model="listQuery.usersPhone" style="width: 200px;margin-left:20px;margin-top:8px;margin-right:10px" class="filter-item" :placeholder="$t('recommend.Please_enter_the_Sharing_user_phone_number')" >
      </el-input>
     {{$t('recommend.Invitation_time')}}
      <el-date-picker
        v-model="listQuery.date"
        :start-placeholder="$t('recommend.start_date')"
        :end-placeholder="$t('recommend.End_date')"
        type="datetimerange"
        :placeholder="$t('recommend.Select_date')"
        value-format="timestamp"
        style="margin-left:20px;">
      </el-date-picker>
      <el-button class="filter-item" icon="el-icon-search" type="primary" v-waves  @click="handleFilter" style="margin-top:10px;margin-left:10px">{{$t('recommend.Find')}}</el-button>
    </div>
    <!--表格 -->
    <el-table :data="list" :element-loading-text="$t('recommend.give_me_time')" v-loading="loading.list" border fit highlight-current-row style="width: 100%">
      <el-table-column prop="id" :label="$t('recommend.Number')"> </el-table-column>
      <el-table-column prop="usersPhone" :label="$t('recommend.Sharing_user_phone_number')"> </el-table-column>
      <el-table-column prop="nickName" :label="$t('recommend.Referral_name')"> </el-table-column>
      <el-table-column prop="inviteUsersPhone" :label="$t('recommend.Referral_code')"> </el-table-column>
      <el-table-column prop='systemValue' :label="$t('recommend.Invitation_credit')"> </el-table-column>
      <el-table-column prop='ctime' :label="$t('recommend.Invitation_time')"> </el-table-column>
      <!-- <el-table-column prop='status' label="状态"></el-table-column> -->
    </el-table>
    <!-- pagination 分页 -->
    <div class="pagination-container">
      <el-pagination 
      background 
      @size-change="handleSizeChange" 
      @current-change="handleCurrentChange" 
      :current-page="listQuery.pageNo" 
      :page-sizes="[10, 20, 30, 40]" 
      :page-size="listQuery.pageSize" 
      layout="total, sizes, prev, pager, next, jumper" 
      :total="total">
      </el-pagination>
    </div>
    <!-- 回到顶部 -->
    <BackToTop></BackToTop>
  </div>
</template>
<script>
import { getInviteListByPageCondition, } from '@/api/recommend'
import BackToTop from '@/components/BackToTop'
export default {
  name: 'recommend_list',
  components: {
    BackToTop
  },
  data() {
    return {
      loading: {
        list: false
      },
      total: 0,
      listQuery: {
        pageNo: 1,
        pageSize: 10,
        usersPhone: '',
        date:''
      },
      list:null,
      dialogFormVisible: false,
    }
  },
  methods: {    
    //点击查找
    handleFilter() {
      if(!this.listQuery.date) {
        this.listQuery.date = ''
      }
      this.listQuery.pageNo = 1
      this.getList()
    },
    //获取推荐列表
    async getList() {
      this.loading.list = true
      try {
        const { data } = await getInviteListByPageCondition(this.filtersCondition)
        this.list = data.records.map((item, index) => ({index: index + 1, ...item}))
        this.total = data.total
      } catch (error) { 

      }
      this.loading.list = false     
    },
    handleSizeChange(val) {
      this.listQuery.pageSize = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.listQuery.pageNo = val
      this.getList()
    },
    //将时间戳转化成日期字符串
    formatDate(date, offset){
      if(date && typeof date  == 'object' ){
          const d = date[offset];
          return new Date(d).getTime()
      }
      return ''
    },
  }, 
  computed: {
    //请求的过滤条件
    filtersCondition(){
      return {
        pageNo: this.listQuery.pageNo,
        pageSize: this.listQuery.pageSize,
        usersPhone:this.listQuery.usersPhone,
        startTime:this.listQuery.date[0],
        endTime:this.listQuery.date[1],
      }
    },
  },
  created(){
    this.getList()
  },
}
</script>
<style lang="scss" scoped>
  /deep/   .el-carousel__container{
  height:500px !important;
}
  
</style>
